<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>渡江胜利路</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        .info {
            display: none;
            z-index: 999;
            width: auto;
            min-width: 12rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            text-align: center;
        }

        .BMap_Marker img {
            border-radius: 50%;
            padding: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            background: #fff;
        }
    </style>
    <script>
        // 判断用户是客户端还是手机端
        (function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        })()
        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
            window.location.href = "mshow-prev";
        }
    </script>
    <script src="{{asset('js/jquery.min.js')}}"></script>
    <!-- 原来接口 -->
    <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=oTR2HK5VrZ31XUu0jaVDqVGTK8vGyvR0"></script> -->
    <!-- 轮播图 -->
    <script src="{{asset('js/swiper-bundle.min.js')}}"></script>

    <!-- 新街口 -->
    <script src="//api.map.baidu.com/api?v=2.0&ak=oTR2HK5VrZ31XUu0jaVDqVGTK8vGyvR0"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

    <link rel="stylesheet" href="{{asset('css/building.css')}}">
    <link rel="stylesheet" href="{{asset('css/show.css')}}">
    <link rel="stylesheet" href="{{asset('iconfont/iconfont.css')}}">
    <link rel="stylesheet" href="{{asset('css/swiper-bundle.min.css')}}">
    <!-- asset路径=/public/icons -->
    <!-- <link rel="stylesheet" href="../../public/icons/背景.png"> -->
</head>

<body>
    <div class="info">
        <h2>渡江胜利路</h2>
    </div>
    <div class="logo_container">
        <img src="{{asset('icons/logo.png')}}" alt="">
    </div>
    <!-- 右上角标签卡 -->
    <div class="label_card_container">
        <div class="top_of_label clearfix">
            <div class="title_of_label">渡江胜利路</div>
            <div class="title_of_label">南京红色地图</div>
        </div>
        <div class="content_of_label">渡江胜利路线是按照渡江战役解放军进军路线，沿途经过浦口革命烈士纪念碑，浦口火车站，首都下关电厂，渡江胜利纪念碑，最终到达总统府。</div>
    </div>
    <!-- 上方Logo -->
    <div class="col-logo-container">

    </div>
    <!-- 左上角logo -->
    <div id="container">
        <div class="logo_container">
            <img src="{{asset('icons/logo.png')}}" alt="" class="logo_img" />
        </div>
    </div>
    <div class="guanbi-container">
        <i class="iconfont icon-guanbi"></i>
    </div>
    <!-- 建筑具体内容 -->
    <div class="detail-info clearfix">
        <div class="top-container clearfix">

            <div class="left-of-top-container clearfix">
                <!-- 缩略图盒子 -->
                <div class="thumb-container">
                    <!-- 缩略图 -->
                    <img class="thumb-img" id="thumb-img" src="" alt="">
                </div>
                <!-- 主要简介 -->
                <div class="title-p clearfix">
                    <p id="title-p"></p>
                    <p id="Introduction"></p>
                </div>
                <!-- 相册 -->
                <div class="album-container">

                </div>
            </div>
            <div class="right-of-top-container clearfix">
                <!-- 具体信息 -->
                <p id="address">建 筑 地 址： </p>
                <p id="post_excerpt">建 筑 情 况： </p>
            </div>
        </div>
        <div class="content-container album-container">
            <h2>照片图册</h2>
            <p class="pictures-hint" style="margin-left:15px;">暂无图片</p>
            <div class="img-box clearfix">
                <!-- <img src="../../public/upload/files/logo.png" alt=""> -->
                <!-- <div class="every-img-box"></div> -->
            </div>
        </div>
        <div class="content-container" style="margin-bottom:50px;">
            <h2>点击图片进入全景</h2>
            <p class="pano-hint" style="margin-left:15px;">暂无全景导览</p>
            <a href="#" class="pano" target="_blank" style="display:none;margin-left:10px;">
                <img src="" alt="" class="thumb_img"
                    style="width: 360px;height: auto;border-radius: 5px;margin-bottom:50px;">
            </a>
        </div>
    </div>
    <!-- 5.26改为百度地图样式 -->
    <div class="left-panel clearfix">
        <div class="header-of-panel clearfix">
            <p id="title-p">渡江胜利纪念馆</p>
            <p id="introduction">状况良好，免费开放。</p>
        </div>
        <div class="album-container">

        </div>
    </div>
    <!-- 缩略图相册 轮播图 遮罩层 -->
    <div class="swiper-mask">
        <!-- Swiper -->
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图1.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图2.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图3.jpg)"></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <!-- 底部缩略图 -->
        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图1.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图2.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/test_imgs/缩略图3.jpg)"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    /* // 判断用户是客户端还是手机端
    (function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    })()
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
        window.location.href = "mshow-prev";
    } */
    var pois =@json($redPois);
    var poisWay =@json($redWayPois);
    // console.log(poisWay);//对象数组
    // 图片路径前缀
    let src_prefix = "{{asset('')}}";
    // 更换接口
    // var map = new BMap.Map('container'); // 创建Map实例
    var map = new BMap.Map('container'); // 创建Map实例
    var mapStyle = [
        {
            "featureType": "road",
            "elementType": "all",
            "stylers": {
                "lightness": 20
            }
        },
        {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "color": "#f49935"
            }
        },
        {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "local",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#d1e5ff"
            }
        },
        {
            "featureType": "poi",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }
    ];
    map.setMapStyle({
        styleJson: mapStyle
    });
    var markers = [];
    // map.centerAndZoom('南京市', 14); // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(118.740391, 32.093897), 13.5);
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    // var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
    // map.addControl(scaleCtrl);
    // var zoomCtrl = new BMap.ZoomControl(); // 添加比例尺控件
    // map.addControl(zoomCtrl);
    var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    // var myGeo = new BMap.Geocoder();
    var points = [];
    var labels1 = [];
    // 渡江胜利路
    var labels2 = [];
    // $('#thumb-container').attr('background-image','url({{asset('iconfont/iconfont.css')}})')
    // 添加Logo
    // $('.container').append()
    // $(.label_card_container).css('background-image',url({{asset('icons/white_bg.css')}});
    // console.log('pois=>',pois);
    pois.forEach((item, i) => {
        // console.log(item.thumbnail);
        var point = new BMap.Point(item.x, item.y);
        item.point = point;
        //console.log(item.x + '/' + item.y);
        // console.log('point =', point);
        //         lat: 31.323071
        // lng: 118.740708
        if (item.nav_order) {
            points.push(point);
            // console.log(272,'item.navorder');一共5次
        }
        // 设置点位信息 16.5是比例大小
        //map.centerAndZoom(point, 16.5);
        // var opts = {
        //     position: point,
        //     offset: new BMap.Size(-10, -10)
        // };
        var icon = new BMap.Icon(item.thumbnail, new BMap.Size(83, 83));
        icon.setImageSize(new BMap.Size(75, 75));
        // console.log('icon = ',icon);
        // console.log('icon = ', icon);
        var marker = new BMap.Marker(point);
        marker.setIcon(icon);
        marker.setOffset(new BMap.Size(10, -40));
        marker.setTitle(item.post_title);
        // console.log(288,'marker');一共164次
        markers.push(marker);
        // 点击地图上的图标
        marker.addEventListener("click", function () {
            console.log('点击');
            $('.guanbi-container').css('visibility', 'visible')
            $('#address').text('建 筑 地 址： ')
            $('#post_excerpt').text('建 筑 情 况： ')
            $('.img-box').empty();

            console.log('item = ', item);
            // console.log(JSON.parse(item.more));
            let photos_of_item = JSON.parse(item.more).photos || [];
            console.log(photos_of_item);
            let logo_src = src_prefix + item.thumbnail;
            // 缩略图
            $('#thumb-img').attr('src', logo_src);
            console.log($('#thumb-img'));
            $('#title-p').text(item.post_title)
            $('#Introduction').text(item.post_preservation)
            // 建筑地址
            $('#address').append(item.post_position)
            $('#post_excerpt').append(item.post_excerpt)
            // 添加相册具体图片 pictures
            // 添加具体的图片
            if (photos_of_item.length) {
                $('.pictures-hint').hide();
            } else {
                $('.pictures-hint').show();
            }
            photos_of_item.forEach((item2) => {
                $('.img-box').append(`<img src=${src_prefix}${item2.url}></img>`);
            })
            if (item.pano_address) {
                // console.log(149);
                $('.pano-hint').hide();
                $('.pano').show();
                $('.pano').attr('href', item.pano_address);
                $('.thumb_img').attr('src', item.pano_thumb)
            } else {
                $('.pano-hint').show();
                $('.pano').hide();
            }
            // console.log(item.more);
            if (photos_of_item.length) {
                // 有图片
                $('.content-container:nth-of-type(2)').css('height', '300px')
                $('pictures-hint').hide()
            } else {
                console.log(2);
                $('pictures-hint').show()
                console.log($('.content-container:nth-of-type(2)'));
                $('.content-container:nth-of-type(2)').css('height', '100px')

            }
            $('.detail-info').css('display', 'block')
        });
        // 点击关闭按钮
        $('.guanbi-container').click(() => {
            $('.detail-info').css('display', 'none')
            $('.guanbi-container').css('visibility', 'hidden')
        });
        labels1.push(marker);
        if (item.status == 4) {
            labels2.push(marker);
        }
        //map.addOverlay(label);
        // map.addOverlay(new BMap.Marker(point, {
        //     title: '南京市总统府'
        // }))
        // if (points.length == items.length) {
        //     var driving = new BMap.DrivingRoute(map, {
        //         renderOptions: {
        //             map: map,
        //             autoViewport: true
        //         }
        //     });
        //     driving.setSearchCompleteCallback(function(){
        //       var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
        //       var polyline = new BMap.Polyline(pts);
        //       map.addOverlay(polyline);
        //     });
        //     for (var j=0; j<items.length-1; j++) {
        //         driving.search(items[j].point, items[j+1].point);
        //     }
        // }
    });
    // labels1.forEach(label => {
    //     map.addOverlay(label);
    // });
    var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: labels2 });
    console.log('BMap_noprint');
    $('span').each(function (index, ele) {
        console.log(123);
    });

    // console.log('ponits = ',points);
    if (points.length > 1) {
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, {
            scale: 0.6,//图标缩放大小
            strokeColor: '#fff',//设置矢量图标的线填充颜色
            strokeWeight: 2,//设置线宽
        });
        var icons = new BMap.IconSequence(sy, '100%', '5%', false);
        // console.log('icons', icons);
        var polyline = new BMap.Polyline(points, {
            strokeColor: 'red',
            strokeWeight: 8,
            strokeOpacity: 0.7,
            strokeStyle: 'solid',
            geodesic: false,
            enableEditing: false,
            enableClicking: false,
            icons: [icons]
        });

        // test

        map.addOverlay(polyline);
        map.addEventListener("zoomend", function () {
            if (this.getZoom() < 13) {
                //   移除所有线
                map.clearOverlays()
                console.log('缩小');
                // 重新添加地图点
            markerClusterer.clearMarkers();

                markerClusterer.addMarkers(labels2);

            } else {
                console.log('放大');
                map.addOverlay(polyline)
            }
        });
        // map.removeOverlay(polyline);

    }
    // 点击标签选项卡
    let str0 = '渡江胜利路线是按照渡江战役解放军进军路线，沿途经过浦口革命烈士纪念碑，浦口火车站，首都下关电厂，渡江胜利纪念碑，最终到达总统府。';
    let str1 = '南京红色地图汇集了全市各区165个红色文化资源点';
    let strArr = []
    strArr.push(str0, str1)
    // 浦口火车站
    let point0 = new BMap.Point(118.727587, 32.102093);
    let point1 = new BMap.Point(118.803804, 32.050571);
    let pointArr = [point0, point1]
    $('.title_of_label').click(function () {
        $(this).siblings().css("background", "#fff");
        $(this).siblings().css("color", "#000");
        // console.log($(this));
        $(this).css("background", "radial-gradient(circle,#e35f5f, red)");
        $(this).css("color", "#fff");
        // console.log($(this).index());
        $('.content_of_label').html(strArr[$(this).index()])
        // map.centerAndZoom(new BMap.Point(118.740391, 32.093897), 13.5);
        // console.log(pointArr[$(this).index()]);
        // 定位到设置的中心点
        let pointObj = pointArr[$(this).index()];
        map.centerAndZoom(pointArr[$(this).index()], 15.5);
        map.centerAndZoom(new BMap.Point(pointObj.lng, pointObj.lat), 13.5);
        // 清除所有点
        map.clearOverlays();
        // 添加地图上的点
        // console.log(labels1);
        // console.log(labels2);
        // map.addOverlay(labels2[0]);
        // console.log(eval(labels+($(this).index())));
        // console.log(eval(1+$(this).index()));
        // console.log(labels1[label]);
        console.log('labels1 = ', labels1.length);
        console.log('labels2 = ', labels2.length);
        if ($(this).index() === 0) {
            // map.addOverlay(labels1[0]);
            // labels2.forEach(item => {
            //     map.addOverlay(item);
            // });
            //console.log($('.BMap_noprint').length);
            markerClusterer.clearMarkers();
            markerClusterer.addMarkers(labels2);
            /* if (points.length > 1) {
                var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, {
                    scale: 0.6,//图标缩放大小
                    strokeColor: '#fff',//设置矢量图标的线填充颜色
                    strokeWeight: 2,//设置线宽
                });
                var icons = new BMap.IconSequence(sy, '100%', '5%', false);
                var polyline = new BMap.Polyline(points, {
                    strokeColor: 'red',
                    strokeWeight: 8,
                    strokeOpacity: 0.7,
                    strokeStyle: 'solid',
                    geodesic: false,
                    enableEditing: false,
                    enableClicking: false,
                    icons: [icons]
                });
                map.addOverlay(polyline);
            } */
            // var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:labels2});
        } else {
            // labels1.forEach(item => {
            //     map.addOverlay(item);
            // });
            markerClusterer.clearMarkers();
            markerClusterer.addMarkers(labels1);
            // var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:labels1});
        }
    })
    // 轮播图js
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        //   底部展示图片的个数
        slidesPerView: 6,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });

</script>
